<template>
  <div class="community-detail">
    <!-- head -->
    <qy-navigation></qy-navigation>
    <!-- content -->
    <div class="content qy-box-space">
      <div class="container">
        <!-- container-head -->
        <div class="container-head">
           <div class="col-left" >
              <img :src="formData.avatar_url" :onerror="errorImage" >
           </div>
           <div class="col-center" >
             <div class="row-name" >{{formData.user_name}}</div>
             <div class="row-msg" ><i class="el-icon-s-cooperation" ></i><span class="qy-padl10" >{{formData.position}} | {{formData.company}}</span></div>
             <div class="row-msg" ><i class="el-icon-s-order"></i><span class="qy-padl10" >{{formData.introduce}}</span></div>
           </div>
           <div class="col-right" >
             <div class="col-right-share" >
               <img src="@/assets/img/icon/weibo.png" >
               <img src="@/assets/img/icon/liulanqi.png" >
               <img src="@/assets/img/icon/github.png" >
             </div>
             <div>
               <el-button type="primary"  plain @click="controller('edit')" >编辑资料</el-button>
             </div>
           </div>
        </div>
      </div>
      <!-- container-right -->
      <div class="label"></div>
    </div>
  </div>
</template>

<script>
import Request from '@/server/http'
import Api from '@/server/api'
export default {
  name: "Center",
  data() {
    return {
      formData:{},
      errorImage: 'this.src="' + require('../../assets/img/icon/head.png') + '"'
    };
  },
  methods: {
    // get init data
    getData() {
      Request.requestPost('', Api.apiUser.userinfo)
        .then((res) => {
          console.log(res);
          this.formData = res.data.data
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //controller
    controller(name, index, fid) {
      switch (name) {
        case "add_rep":
          this.clickIndex = index;
          this.clickIndexOne = null;
          this.fid = fid
          break;
        case "add_rep_one":
          this.clickIndexOne = index;
          this.clickIndex = null;
          this.fid = fid
          break;
        case 'edit':
          this.$router.push({path:'/center/edit'}) 
        break;
        default:
          break;
      }
    },
  },
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:rgba(204,204,204,0.2)");
  },
  mounted() {
    this.getData()
  }
};
</script>

<style scoped lang="scss">
@import "@/styles/variable.scss";
.el-icon-thumb:hover{
  color: $blue-weight ;
}
// content
.content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  .container {
    width: 75%;
    height: 22vh;
    margin-right: 40px;
    background-color: $white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    // head
    .container-head {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 90%;
      padding: 2% 5%;
      height: 130px;
      .col-left{
        flex-basis: 20%;
        text-align: left;
        img{
          width: 100px;
          border-radius: 100px;
        }
      }
      .col-center{
        flex-basis: 60%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .row-name{
          font-size: 20px;
          font-weight: bolder;
        }
        .row-msg{
          font-size: 14px;
          margin-top: 8px;
          color: $gray-weight;
        }
      }
      .col-right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 70%;
        .col-right-share{
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          img{
            width: 16px;
          }
        }
      }
    }
  }
  //right-lable
  .label {
    width: 25%;
    height: 60vh;
    background-color: $white;
  }
}

</style>
